<template>
  <div class="modality-comb">
    <el-form-item :label="label">
      <el-checkbox-group v-model="allModality" class="all-modality" @change="changeModality('all')">
        <el-checkbox-button :label="'all'">全部</el-checkbox-button>
      </el-checkbox-group>
      <el-checkbox-group
        v-model="modalities"
        class="modality-list"
        @change="changeModality('single')"
      >
        <el-checkbox-button v-for="item in modalityOptions" :key="item.name" :label="item.name">{{
          item.name
        }}</el-checkbox-button>
      </el-checkbox-group>
    </el-form-item>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'ModalityComb',
})
</script>

<script lang="ts" setup>
import { defineComponent, defineEmits, defineProps, PropType, reactive, toRefs, watch } from 'vue'

import IBaseObj from '#/index'

const props = defineProps({
  label: {
    type: String,
    default: '设备类型:',
  },
  modalityOptions: {
    type: Array as PropType<IBaseObj[]>,
    default: () => [],
  },
  modalityList: {
    type: Array,
    default: () => [],
  },
})
const emit = defineEmits(['update:modality-list', 'onChangeModality'])

const state = reactive({
  allModality: ['all'], // 默认选中“全部”
  modalities: [],
})
const { allModality, modalities } = toRefs(state)

watch(
  () => props.modalityList,
  (val) => {
    ;(state.modalities as any) = val
  }
)
watch(
  () => state.modalities,
  (val) => {
    state.allModality = val.length === 0 ? ['all'] : [] // 如果数组是空的，就默认选中“全部”
  }
)

const changeModality = (val: string) => {
  if (val === 'all') {
    state.modalities = []
  }
  emit('update:modality-list', state.modalities)
  emit('onChangeModality')
}
</script>

<style lang="scss" scoped>
.modality-comb {
  .all-modality {
    :deep(.el-checkbox-button:last-child .el-checkbox-button__inner) {
      border-radius: 4px 0 0 4px;
    }
  }

  .modality-list {
    :deep(.el-checkbox-button:first-child .el-checkbox-button__inner) {
      border-radius: 0;
    }
  }

  :deep(.el-form-item__content) {
    display: inline-flex;
    align-items: center;

    .el-checkbox-group {
      display: inline-block;

      .el-checkbox-button {
        .el-checkbox-button__inner {
          padding-right: 30px;
          padding-left: 30px;
          margin-right: 2px;
          color: var(--submenu-text-color);
          background: var(--tab-item-color);
          border: none;
          box-shadow: none;
        }

        &.is-checked .el-checkbox-button__inner {
          color: var(--submenu-text-color-active);
          background: var(--submenu-background-active-color);
          border: none;
        }
      }
    }
  }
}
</style>
